<script>

	function showErrorPopup(title, message, callback) {
		// $("#cover").show();
		$("#error_popup").slideDown(200);
		$("#error_title").html(title);
		$("#error_message").html(message);
		$("#error_ok_button").one("click", callback);
	}

	function showMessagePopup(title, message, callback) {
		$("#cover").show();
		$("#message_popup").slideDown(200);
		$("#message_title").html(title);
		$("#message_text").html(message);
		$("#message_ok_button").one("click", callback);
	}

	function showConfirmPopup(title, message, confirmCallback, cancelCallback) {
		$("#cover").show();
		$("#confirm_prompt_frame").slideDown(200);
		$("#confirm_title").html(title);
		$("#confirm_message").html(message);

		function success_cb() {
			confirmCallback();
			//解除绑定另一按钮的事件
			$("#confirm_cancel_button").off("click");
			rebindConfirmPopup();
		}

		function fail_cb() {
			cancelCallback();
			//解除绑定另一按钮的事件
			$("#confirm_ok_button").off("click");
			rebindConfirmPopup();
		}

		$("#confirm_ok_button").one("click", success_cb);
		$("#confirm_cancel_button").one("click", fail_cb);
	}

	$(document).ready(rebindConfirmPopup);
	$(document).ready(bindNormalButtonClick);

	function rebindConfirmPopup() {
		$("#confirm_ok_button").click(function () {
			$("#confirm_prompt_frame").slideUp(200);
			$('#cover').hide();
		});
		$("#confirm_cancel_button").click(function () {
			$("#confirm_prompt_frame").slideUp(200);
			$('#cover').hide();
		});
	}

	function bindNormalButtonClick() {
		$("#error_ok_button").click(function () {
			$("#error_popup").slideUp(200);
			$("#cover").hide();
		});
		$("#message_ok_button").click(function () {
			$("#message_popup").slideUp(200);
			$("#cover").hide();
		})
	}


</script>
<style>
	/*#error_popup, #confirm_popup, #message_popup {*/
	/*position: fixed;*/
	/*top: 30%;*/
	/*left: 30%;*/
	/*background-color: white;*/
	/*color: red;*/
	/*border: 1px solid black;*/
	/*-webkit-border-radius: 5px;*/
	/*-moz-border-radius: 5px;*/
	/*border-radius: 5px;*/
	/*box-shadow: rgba(0,0,0,30) 2px 2px 2px;*/
	/*padding: 10px;*/
	/*}*/
	.prompt_frame {
		min-width: 200px;
		position: fixed;
		-webkit-box-shadow: rgba(0, 0, 0, 50) 1px 1px 3px;
		-moz-box-shadow: rgba(0, 0, 0, 50) 1px 1px 3px;
		box-shadow: rgba(0, 0, 0, 50) 1px 1px 3px;
		overflow: auto;
		z-index: 1002;
		margin: 0 30% 0 30%;
		padding: 1px;
		background-color: snow;
		border-radius: 2px;
		/*border: black 0.5px solid;*/
		/*display: block;*/
		filter: alpha(opacity=100);
	}

	.prompt_title {
		background-color: #3F51b5;
		overflow: hidden;
	}

	.prompt_title_font {
		text-align: center;
		font-size: 24px;
		color: rgb(147, 224, 255);
		word-spacing: 1px;
		margin: 10px 0 10px 0;
	}

	.prompt_message_font {
		padding: 0;
		font-family: arial, sans-serif;
		font-size: 20px;
		word-spacing: 1.5px;
		letter-spacing: 0.5px;
		margin: 0px auto auto auto;
		color: #36322b;
	}

	.prompt_body {
		padding: 50px 10px 50px 10px;
	}

	.prompt_buttons {
		overflow: hidden;
		zoom: 1;
	}

	.btn {
		border: 0px;
		padding: 0px;
		background: transparent;
		display: block;
		width: 100%;
		cursor: pointer;
	}

	.prompt_button_l .prompt_button_r {
		display: inline;
		cursor: pointer;
	}

	.prompt_button_l {
		float: left;
		width: 50%;
		background-color: #8c9eff;
	}

	.prompt_button_r {
		float: right;
		position: relative;
		width: 50%;
		background-color: #7986cb;
	}

	.prompt_font {
		font-size: 16px;
		font-weight: bold;
		color: #283593;
	}

	.prompt_singe_button {
		border: 0;
		padding: 0;
		background: transparent;
		margin: 0 33% 0 33%;
		background-color: #8c9eff;
	}
</style>
<div id="error_popup" hidden>
	<h2 id="error_title"></h2>
	<p id="error_message"></p>
	<button id="error_ok_button">OK</button>
</div>
<div class="prompt_frame" id="message_popup" hidden>
	<div class="prompt_title">
		<p class="prompt_title_font" id="message_title">
		</p>
	</div>
	<div class="prompt_body">
		<p class="prompt_message_font" id="message_text">
		</p>
	</div>
	<div class="prompt_buttons">
		<div class="prompt_singe_button">
			<Button id="message_ok_button" class="btn prompt_font" type="button">
				OK
			</Button>
		</div>
	</div>
</div>

<div id="cover" style="background: #000; width: 100%;height: 100%;position: fixed; top: 0; left: 0;
 -moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80); z-index:1001;" hidden></div>
<div class="prompt_frame" id="confirm_prompt_frame" hidden>
	<div class="prompt_title" id="prompt_Text">
		<p class="prompt_title_font" id="confirm_title">
		</p>
	</div>
	<div class="prompt_body" id="prompt_Body">
		<p class="prompt_message_font" id="confirm_message">
		</p>
	</div>
	<div class="prompt_buttons" id="Prompt_Button">
		<div class="prompt_button_l" id="left_btn">
			<Button id="confirm_ok_button" class="btn" type="button"><p class="prompt_font">Confirm</p></Button>
		</div>
		<div class="prompt_button_r" id="right_btn">
			<Button id="confirm_cancel_button" class="btn" type="button"><p class="prompt_font">Cancel</p></Button>
		</div>
	</div>
</div>